.yin{display: none;}
.xian{display: block;}
#all{width: 600px;margin: 0 auto;background: gray;border: 1px solid greenyellow}
#top{
    border: 1px solid gainsboro;
    height: 60px;}
#top img{
    display: block;
    height: 40px;
    position: absolute;
    margin: 12px 0 0 500px;
}
#top div{
    width: 150px;
    height: 45px;
    line-height: 45px;
    text-align: center;
}
/*第一个div位置调整*/
#top div:nth-child(2){
    margin: 15px 0 0 20px;
}
/*第2个div位置调整*/
#top div:nth-child(3){
    margin: -45px 0 0 200px;
}

/**将*/
#ipt1,#ipt2{
    border: 0 solid;
    width: 150px;
    height: 45px;
    float: left;
    text-align: center;
    background-color: grey;
    border-radius: 15px 15px 0 0;
    cursor: pointer}
#mid{
    height: 230px;
}
#mid div:nth-child(1),#mid div:nth-child(2){
    height: 180px;
}
#mid div:nth-child(1){
   background: white;
}
#mid div:nth-child(2){
    background: pink;
}
#mid div:nth-child(3){
    border: 1px solid gray;
    height: 50px;
}

#mid #but1{
        background: greenyellow;

}
#mid #but2{
    /**使用内边距会撑开盒子*/
    border: none;
    padding: 0 0 0 16px ;
    background: url("../image/po.png") no-repeat;
}
#but1,#but2{cursor: pointer}

#bot{
    border: 1px solid blue;
    height: 180px;
}
#bot div:nth-child(1){
    height: 50px;

}
#bot div:nth-child(2){
    margin: 10px 0 0 50px;
}
#bot div:nth-child(3){
    margin:15px 0 0 50px;
}
#bot div:nth-child(4){
    margin: -22px 0 0 300px;
}
#div1 div:nth-child(1) {
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    border:none;


}
#div1 div:nth-child(2) {
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    background-color: chartreuse;
    border:none;


}
#div1 div:nth-child(3) {
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    background-color: chartreuse;
    border:none;


}
#div1 div:nth-child(4) {
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    background-color: chartreuse;


}

#div2 div:nth-child(1){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    background-color:chartreuse;
    border:none;
}
#div2 div:nth-child(2){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    background-color:chartreuse;
    border:none;
}
#div2 div:nth-child(3){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    background-color:chartreuse;
    border:none;
}
#div2 div:nth-child(4){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 100px;
    background-color:chartreuse;
}
#div3 div:nth-child(1){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 20px;
    border:none;
}
#div3 div:nth-child(2){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 50px;
    background-color: chartreuse;
    border:none;
}
#div3 div:nth-child(3){
    height: 30px;
    width: 700px;
    margin: 10px 0 0 50px;
}
#div4 div:nth-child(1){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 20px;
    background-color: chartreuse;
    border:none;
}
#div4 div:nth-child(2){
    height: 30px;
    width: 400px;
    margin: 10px 0 0 50px;
    background-color: chartreuse;
    border:none;
}
#div4 div:nth-child(3){
    height: 30px;
    width: 700px;
    margin: 10px 0 0 50px;
}
#div4 div:nth-child(4){
    height: 30px;
    width: 700px;
    margin: 10px 0 0 50px;
}